<template>
    <div class="sum">
        <header>
            <!--标题部分-->
            <div class="sum_title">
                <!--插槽-->
                <div style="text-align: right; padding-top:  0.2rem;">
                    <slot></slot>
                </div>
                <h2 style="letter-spacing:6px;">{{title}}</h2>
                <div class="showTime">
                    <span class="time">{{ nowTime }}</span>
                    <span class="date">
                <span>{{ date }} {{ week }}</span>
            </span>
                </div>
            </div>
        </header>
        <section>
            <!--统计总数部分-->
            <div>
                <a-row :gutter="24">
                    <a-col :span="6" v-for="(item,index) in list" :key="index">
                        <div style="display: flex;margin-left: 50px;">
                            <div class="sum_left panel">
                                <i class="iconfont" :class="[item.icon]"></i>
                                <div class="panel-footer"></div>
                            </div>
                            <div class="sum_right">
                                <span>{{item.title}}</span>
                                <div><span class="sum_num">{{item.num}}</span>{{item.unit}}</div>
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </div>
            <!--中间内容部分-->
            <div class="center">
                <!--左边-->
                <a-row :gutter="24">
                    <a-col :span="7">
                        <div class="content-left">
                            <div class="plate" :class="systemStyle[index]" v-for="(item,index) in system" :key="index">
                                <h2>{{item.num}}</h2>
                                <p>{{item.name}}</p>
                            </div>
                            <div class="plate-title">
                                <p>系统使用情况</p>
                            </div>
                        </div>
                        <!--系统版本更新情况-->
                        <div class="content-left-bottom">
                            <h3>> > 聚医云发展历程 < <</h3>
                            <versions/>
                        </div>
                    </a-col>
                    <a-col :span="10">
                        <!--中间-->
                        <div class="content-middle">
                            <div class="middle-title">
                                <h1>系统服务机构数:
                                    <span class="bodyCount" v-for="(item,index) in customerSum" :key="index">{{item}}</span>
                                    家</h1>
                            </div>
                            <div>
                                <area-num/>
                            </div>
                            <div class="middle-bottom" >
                                <dv-border-box-10>
                                    <h1> >> 设备使用情况 << </h1>
                                    <a-row :gutter="24" >
                                        <a-col :span="6" v-for="(item,index) in device" :key="index">
                                            <div class="middle-bottom-content">
                                                <h3>{{item.name}}</h3>
                                                <i class="iconfont" :class="[item.icon]"></i>
                                                <p>{{item.num}}{{item.unit}}</p>
                                            </div>
                                        </a-col>
                                    </a-row>
                                </dv-border-box-10>
                            </div>
                        </div>
                    </a-col>
                    <a-col :span="7">
                        <!--右边-->
                        <div class="content-right">
                            <h3>> > 各月医废重量总值 < <</h3>
                            <monthly-peak/>
                        </div>
                        <div class="content-right">
                            <h3>> > 各区/县卫健局使用情况 < <</h3>
                            <administration/>
                        </div>
                        <div class="content-right">
                            <h3>> > 各区域各月医疗机构医废产量 < <</h3>
                            <ledgerOfMonth/>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </section>
    </div>
</template>

<script>
    import { mixin } from '@/utils/mixin.js'
    import ledgerOfMonth from './table/ledgerOfMonth'
    import MonthlyPeak from './table/monthlyPeak'
    import { getAction } from '@/api/manage'
    import AreaNum from './table/areaNum'
    import Versions from './table/versions'
    import Administration from './table/administration'
    export default {
        name: 'AnnualReport',
        components: { Administration, Versions, AreaNum, MonthlyPeak, ledgerOfMonth},
        mixins: [mixin],
        data(){
            return{
                title:'2021年聚医云数据展板',
                nowTime: '',
                week: '',
                date: '',
                customerSum:'',// 服务机构数
                // 上部分统计总数
                list:[
                    {
                        title : '聚医宝医废产量',
                        icon : 'icon-yifeiguanli',
                        num : 335.48,
                        unit : '吨',
                    },
                    {
                        title : '聚医云医废产量',
                        icon : 'icon-yifeiguanli',
                        num : 1043.28,
                        unit : '吨',
                    },
                    {
                        title : '覆盖区域',
                        icon : 'icon-fuwuquyu',
                        num : 7,
                        unit : '市州36区/县',
                    },
                    {
                        title : '流失客户',
                        icon : 'icon-daichulikehu',
                        num : 0,
                        unit : '家',
                    },
                ],
                // 设备情况
                device:[
                    {
                        name : '蓝牙秤',
                        icon : 'icon-lanyacheng',
                        num : 269,
                        unit : '台',
                    },
                    {
                        name : 'S60PDA',
                        icon : 'icon--_PDA',
                        num : 87,
                        unit : '台',
                    },
                    {
                        name : '5501PDA',
                        icon : 'icon-PDAshouchigongzuoshebei',
                        num : 138,
                        unit : '台',
                    },
                    {
                        name : 'HP120Pro',
                        icon : 'icon-shouji',
                        num : 31,
                        unit : '台',
                    },
                ],
                // 系统使用情况
                system:[
                    {
                        name : '系统用户量总数',
                        num : 0,
                    },
                    {
                        name : '医废提交条数峰值（条/天）',
                        num : 2567,
                    },
                    {
                        name : '医废提交次数峰值（次/天)',
                        num : 1496,
                    },
                    {
                        name : '用户登陆数峰值（个/天）',
                        num : 549,
                    },
                ],
                // 系统使用情况样式
                systemStyle:[ "ss1","ss2","ss3","ss4",]
            }
        },
        mounted() {
            // 获取时间
            this.nowTimes();
            this.getStatisticsData()
        },
        methods: {
            async getStatisticsData() {
                let res = await getAction('/hc/Statistical/returnDataTotal');
                let serviceNum = 0;
                if(res.success){
                    this.list[3].num = res.result.loss;
                    this.system[0].num = res.result.user;
                    serviceNum = res.result.customerSum;
                }
                let sNumber = serviceNum.toString();
                var data = [];
                for (var i = 0, len = sNumber.length; i < len; i += 1) {
                    data.push(+sNumber.charAt(i))
                }
                this.customerSum = data;

            },
            // 时间格式化
            timeFormate(timeStamp) {
                //显示当前时间
                let newDate = new Date(timeStamp)
                let weeks = ['日', '一', '二', '三', '四', '五', '六']
                this.week = '星期' + weeks[newDate.getDay()]
                this.date = newDate.Format('yyyy-MM-dd')
                this.nowTime = newDate.Format('hh:mm:ss')
            },

            nowTimes() {
                this.timeFormate(new Date())
                setInterval(this.nowTimes, 1000)
                this.clear()
            },

            clear() {
                clearInterval(this.nowTimes)
                this.nowTimes = null
            }
        }

    }
</script>

<style lang="less" scoped>

    @font-face {
        font-family: 'iconfont';
        src: url('//at.alicdn.com/t/font_2059552_7jpvy617m72.eot');
        src: url('//at.alicdn.com/t/font_2059552_7jpvy617m72.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_2059552_7jpvy617m72.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_2059552_7jpvy617m72.woff') format('woff'),
        url('//at.alicdn.com/t/font_2059552_7jpvy617m72.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_2059552_7jpvy617m72.svg#iconfont') format('svg');
    }

    @font-face {
        font-family: 'electronicFont';
        src: url('~@assets/styles/fonts/DS-DIGIT.TTF') format('truetype');
    }
    .sum {
        background: rgba(0, 0, 0, 0.3);
        .sum_title {
            position: relative;
            background: url(~@assets/img/back/head.png) no-repeat top center;
            background-size: 100% 135%;
            padding-bottom: 1px;

            h2 {
                color: #7ef0ff;
                font-size: 0.4rem;
                text-align: center;
                line-height: 0.75rem;
                letter-spacing: 1px;
                margin-top: -10px;
            }

            .showTime {
                position: absolute;
                left: 0.8rem;
                top: 0.2rem;
                color: rgba(126, 240, 255, 0.7);
                display: flex;
                align-items: center;

                .time {
                    font-size: 0.28rem;
                    margin-right: 0.18rem;
                }

                .date {
                    span {
                        display: block;
                        &:nth-child(1) {
                            font-size: 0.12rem;
                            text-align: right;
                        }

                        &:nth-child(2) {
                            font-size: 0.14rem;
                        }
                    }
                }
            }
        }
        .sum_left{
            width: 0.45rem;
            margin-top: 0.2rem;
            letter-spacing: 2px;
            .iconfont{
                font-size:0.45rem;
                margin-left: 0.03rem;
                position: relative;
                top:0.05rem;
                color:#24C4FF;
                align-items: center;
            }
        }
        .panel {
            overflow: hidden;
            position: relative;
            height: 0.6rem;
            width: 0.85rem;
            padding: 0 0.1875rem 0;
            margin-bottom: 0.1875rem;

            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                width: 10px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
            }

            &:after {
                position: absolute;
                top: 0;
                right: 0;
                content: '';
                width: 10px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
            }
            .panel-footer {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;

                &:before {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #02a6b5;
                    border-left: 2px solid #02a6b5;
                }

                &:after {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #02a6b5;
                    border-right: 2px solid #02a6b5;
                }
            }
        }
        .sum_right{
            color:#ffffff;
            margin-top: 0.2rem;
            margin-left: 0.1rem;
            letter-spacing: 2px;
            .sum_num{
                font-family: 'electronicFont';
                font-weight: bold;
                color: #ffeb7b;
                font-size: 0.48rem;
                margin-right: 0.2rem;

            }
        }
        .center{
            .content-left{
                margin-left: 0.4rem;
                height: 3.5rem;
                .plate{
                    /*border:1px #fff solid;*/
                    width: 45%;
                    display: inline-block;
                    height: 1.0rem;
                    margin-bottom:0.2rem;
                    margin-right: 0.2rem;
                    background-color: #33468980;
                    h2{
                        text-align: center;
                        font-size: 0.3rem;
                        margin-top: 0.08rem;
                    }
                    p:nth-of-type(1){
                        color: #24C4FF;
                        font-size: 0.19rem;
                        font-weight: bold;
                        text-align: center;
                        margin-top: -0.09rem;
                    }
                    p:nth-of-type(2){
                        color: #24C4FF;
                        font-size: 0.12rem;
                        font-weight: bold;
                        text-align: center;
                        margin-top: -0.1rem;
                    }
                }
                .plate-title{
                    background-color: #fff;
                    height: 1.2rem;
                    width: 1.2rem;
                    border-radius: 50%;
                    position: relative;
                    top:-1.9rem;
                    left:37%;
                    z-index: 99;
                    :after{
                        content: "";
                        display: block;
                        width: 1rem;
                        height: 1rem;
                        border-radius: 50%;
                        background-color: #1A6FD3;
                        position: absolute;
                        top:0.1rem;
                        left:0.1rem;
                        z-index: -1;
                    }
                    p{
                        color: #fff;
                        display: inline-block;
                        font-size: 0.15rem;
                        line-height: 1.2rem;
                        margin-left: 0.15rem;
                        font-weight: bold;
                    }
                }
                .ss1 {
                    background:radial-gradient(circle at bottom right,transparent 0.6rem,#33468980 0) bottom right;
                }
                .ss2 {
                    /*margin-left: 0.2rem;*/
                    background:radial-gradient(circle at bottom left,transparent 0.6rem,#33468980 0) bottom left;
                }
                .ss3 {
                    background:radial-gradient(circle at top right,transparent 0.6rem,#33468980 0) top right;
                }
                .ss4{
                    /*margin-left: 0.2rem;*/
                    background:radial-gradient(circle at top left,transparent 0.6rem,#33468980 0) top left;
                }

            }
            .content-left-bottom{
                margin-left: 0.4rem;
                margin-top: -1rem;
                h3{
                    display: inline-block;
                    height: 0.5rem;
                    width: 100%;
                    background-color: #33468980;
                    color:#fff;
                    font-size: 0.2rem;
                    line-height: 0.5rem;
                    text-align: center;
                }
            }
            .content-middle{
                h1{
                    font-size: 0.3rem;
                    color:#fff;
                    font-weight: bold;
                    text-align: center;
                    line-height: 0.8rem;
                    letter-spacing: 0.1rem;
                }
                .middle-title{
                    height: 0.8rem;
                    background-color: #33468980;

                    .bodyCount{
                        display: inline-block;
                        height: 0.65rem;
                        width: 0.5rem;
                        line-height: 0.65rem;
                        margin-left: 0.08rem;
                        border:2px #10356B solid;
                        border-radius: 10%;
                        background: -webkit-linear-gradient(to left,#274C76,#123058,#163C6B);
                        font-size: 0.6rem;
                        letter-spacing: 0.25rem;
                        font-family: 'electronicFont';
                        font-weight: bold;
                        color: #AFD3FF;
                        position: relative;
                        top: 0.09rem;
                        padding-left: 0.05rem;

                    }
                }
                .middle-bottom{
                    h1{
                        font-size: 0.23rem;
                        font-weight: normal;
                    }

                    margin-bottom: 0.4rem;
                    .middle-bottom-content{
                        margin: 0.08rem 0 0.4rem 0.6rem;
                        h3{
                            color: #fff;
                            font-weight: bold;
                            font-size: 0.2rem;
                            margin-left: 0.1rem;
                            margin-bottom: 0.15rem;
                            letter-spacing: 0.02rem;
                        }

                        .iconfont{
                            border:2px #7EBEFF solid;
                            border-radius: 50%;
                            padding: 0.15rem;
                            font-size:0.55rem;
                            margin-left: 0.05rem;
                            align-items: center;
                            color:#22B6E4;
                        }

                        p{
                            color: white;
                            font-size: 0.18rem;
                            margin: 0.15rem 0 0.15rem 0.2rem;
                            letter-spacing: 0.05rem;
                        }
                    }
                }
            }
            .content-right{
                h3{
                    display: inline-block;
                    height: 0.3rem;
                    width: 100%;
                    background-color: #33468980;
                    color:#fff;
                    font-size: 0.2rem;
                    line-height: 0.3rem;
                    text-align: center;
                }
            }
        }

    }

</style>
